<template>
    <div class="w-tab">
        <div class="w-tab-title">
            <div
                class="w-tab--item"
                v-for="(item, index) in options"
                :key="index"
                :class="{ active: value === item.value }"
                @click="$emit('input', item.value)"
            >
                {{ item.label }}
            </div>
        </div>
        <div class="w-tab-content">
            <slot :value="value"></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: "WTab",
    props: {
        options: {
            type: Array,
            default() {
                return [];
            },
        },
        value: [String, Number],
    },
};
</script>

<style lang="scss" scoped>
.w-tab {
    display: flex;
    flex-direction: row;
}

.w-tab-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    font-size: 12px;
    margin: 5px 30px 0 0;
    .w-tab--item {
        height: 100%;
        color: rgba(255, 255, 255, 0.41);
        cursor: pointer;
        overflow: auto;
        &.active {
            color: #fff;
        }
        & {
            text-align: center;
            width: 72px;
            height: 26px;
            border: 1px solid #1e8cf4;
            border-radius: 3px;
            padding-top: 5px;
            &.active {
                background: #0e355e;
                border: 1px solid #1e8cf4;
                border-radius: 3px;
            }
        }
        & {
            text-align: center;
            width: 72px;
            height: 26px;
            border: 1px solid #1e8cf4;
            border-radius: 3px;
            &.active {
                background: #0e355e;
                border: 1px solid #1e8cf4;
                border-radius: 3px;
            }
        }
    }
}
</style>
